<template>
	<div>
		<div class="home-content">
			<my-swipe></my-swipe>
			
			<banner-area></banner-area>
			
			<goods-hot :hot-list="jiajuList"></goods-hot>
			<goods-hot :hot-list="wenjuList"></goods-hot>
			<goods-hot :hot-list="shumaList"></goods-hot>
			<goods-hot :hot-list="wanleList"></goods-hot>
		</div>
	</div>
</template>

<script>
	import mySwipe from './swipe.vue'
	import bannerArea from './home/banner-area.vue'
	import goodsHot from './home/goods-hot.vue'
	
	
	export default{
		data(){
			return {
				jiajuList : {},
				wenjuList : {},
				shumaList : {},
				wanleList : {},
			}
		},
		components:{
			mySwipe,
			bannerArea,
			goodsHot
		},
		created() {
			let jiaju = () =>	this.axios.get('/api_goods', {params:{catId: '0045', pagesize:4}});
			let wenju = () => this.axios.get('/api_goods', {params:{catId: '0062', pagesize:5}});
			let shuma = () => this.axios.get('/api_goods', {params:{catId: '0069', pagesize:3}});
			let wanle = () => this.axios.get('/api_goods', {params:{catId: '0077', pagesize:7}});
			
			
			this.axios.all([jiaju(), wenju(), shuma(), wanle()])
			.then(this.axios.spread((jiaju, wenju, shuma, wanle) => {
				// 四个请求现在都执行完成
				let arr = [jiaju.data, wenju.data, shuma.data, wanle.data];
				// 定义好标题的对象
				let titles =[
					{title : '好物热卖', desc : '每周TOP榜'},
					{title : '新品速递', desc : 'in季新品抢先购'},
					{title : '夏天的幸福感', desc : '来自于这些清凉神器'},
					{title : '天天特卖', desc : '超值商品低价购'},
				];
				let list = ['jiajuList', 'wenjuList', 'shumaList', 'wanleList'];
				//对数据遍历整合数据结构
				arr.forEach((item, index, arr) => {
					this[list[index]] = {
						title : titles[index].title,
						desc : titles[index].desc,
						list : item.data
					};
				});
			
			  }));
		},
	}
</script>

<style scoped>
	.home-content{
		margin: 10px 12px 0;
	
	}
</style>
